<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`考勤统计`" :autoBack="true" leftIconColor="$uni-text-color"
    :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">

    <view class="container"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/class_bg.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <view class="classDate">
        <view class="line"></view>
        <view class="classDate_tab">
          <view :class="state.currentTab == index ? 'curr' : 'tabsubtitle'" v-for="(item, index) in state.menulist"
            :key="index" @click="menuclick(index)">{{ item.name }}</view>

        </view>
        <!-- 日打卡 -->
        <view v-show="state.currentTab == 0">
          <s-calendar :dotList="dotList" class="date" @selected-change="changeDay"></s-calendar>
        </view>
        <!-- 周打卡记录 -->
        <view v-show="state.currentTab == 1">
          <s-calendar-week @change="changeWeek" />
          <!-- 九宫格 -->
          <view class="content_box">
            <view class="content_box_item" >
              <view class="number">
                {{ weeblist.attendance_number }}
              </view>
              <view class="title">出勤天数</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ weeblist.be_late }}
              </view>
              <view class="title">迟到</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ weeblist.dummy_deck }}
              </view>
              <view class="title">早退</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ weeblist.leave_early }}
              </view>
              <view class="title">缺卡</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ weeblist.legwork }}
              </view>
              <view class="title">外勤</view>
            </view>
          </view>
        </view>
        <!-- 月打卡记录 -->
        <view v-show="state.currentTab == 2">
          <s-calendar-month @change="changeMonth" />
          <!-- 九宫格 -->
          <view class="content_box">
            <view class="content_box_item" >
              <view class="number">
                {{ monthlist.attendance_number }}
              </view>
              <view class="title">出勤天数</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ monthlist.be_late }}
              </view>
              <view class="title">迟到</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ monthlist.dummy_deck }}
              </view>
              <view class="title">早退</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ monthlist.leave_early }}
              </view>
              <view class="title">缺卡</view>
            </view>
            <view class="content_box_item" >
              <view class="number">
                {{ monthlist.legwork }}
              </view>
              <view class="title">外勤</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 打卡记录 -->
      <scroll-view scroll-y class="comprehensive">
        <view class="att_cont">
          <view class="state"
            v-if="state.currentTab == 1 ? stepweekList.length : state.currentTab == 2 ? stepmonthList.length : stepList.length">
            <s-attendance-state
              :stepList="state.currentTab == 1 ? stepweekList : state.currentTab == 2 ? stepmonthList : stepList"
              :dates="dates" :status="state.currentTab == 0 ? 1 : state.currentTab == 1 ? 2 : 3"></s-attendance-state>
          </view>
          <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
        </view>
      </scroll-view>
    </view>

  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
const { safeAreaInsets } = uni.getSystemInfoSync();
const state = ref({
  menulist: [
    { name: '日', value: '0' },
    { name: '周', value: '1' },
    { name: '月', value: '2' },
  ],
  currentTab: 0,
})

onLoad((options) => {
  let params = {
    date: new Date().toISOString().slice(0, 10),
  };
  getdayList(params)
  getListStatus()

})


// 获取状态
let dotList = ref([])
const getListStatus = () => {
  let now = new Date();
  let month = now.getMonth() + 1 <= 9 ? `0${now.getMonth() + 1}` : now.getMonth() + 1;
  let params = {
    year: now.getFullYear(),
    month: month
  }
  sheep.$api.attendance_record.getAttendanceMonthStatus(params).then((res) => {
    dotList.value = res.data
  })
}
//日周月切换
const menuclick = (e) => {
  state.value.currentTab = e
 
}
//日

const stepList = ref([])
const dates = ref(-1)
const getdayList = (params) => {
  sheep.$api.attendance_record.getAttendanceDay(params).then((res) => {
    stepList.value = res?.data
    if (stepList.value) {
      dates.value = -1
      stepList.value.forEach((i) => {
        if (i.clocking_time) {
          dates.value++
        }
        if (i.status) {
          if (i.status == 1 || i.status == 4) {
            i.clockStatus = '打卡正常'
          }
          if (i.status == 2 || i.status == 3) {
            i.clockStatus = '打卡异常'
          }
        } else {
          i.clockStatus = '打卡异常'
        }
      })
    }


  })
}
//改变日历记录
let datatime = ref()
function changeDay(e) {
  datatime.value = e.fullDate
  let params = {
    date: e.fullDate

  };
  dates.value = -1;
  stepList.value = []
  getdayList(params);

}

// 周请求
let weeblist = ref([]);
const stepweekList = ref([])
const getweekList = (params) => {
  sheep.$api.attendance_record.getAttendanceweek(params).then((res) => {
    weeblist.value = res?.data
    stepweekList.value = res?.data.list
    if (stepweekList.value) {
      stepweekList.value.forEach((item) => {
        item.list.forEach((i) => {
          if (i.date) {
            dates.value++
          }
          if (i.status) {
            if (i.status == 1 || i.status == 4) {
              i.clockStatus = '打卡正常'
            }
            if (i.status == 2 || i.status == 3) {
              i.clockStatus = '打卡异常'
            }
          } else {
            i.clockStatus = '打卡异常'
          }
        })

      })
    }


  })
}
//改变周数
function changeWeek(e) {
  let start = e.weekDateRange.split('-')[0].replace('.', '-');
  let end = e.weekDateRange.split('-')[1].replace('.', '-');
  let params = {
    start_date: e.MondayOfYear + '-' + start,
    end_date: e.MondayOfYear + '-' + end,
  };

  getweekList(params);
}

//月请求数据
let monthlist = ref([]);
const stepmonthList = ref([])
const getmonthList = (params) => {
  sheep.$api.attendance_record.getAttendanceMonth(params).then((res) => {
    stepmonthList.value = res?.data.list
    monthlist.value = res?.data
    stepmonthList.value.forEach((item) => {
      item.list.forEach((i) => {
        if (i.date) {
          dates.value++
        }
        if (i.status) {
          if (i.status == 1 || i.status == 4) {
            i.clockStatus = '打卡正常'
          }
          if (i.status == 2 || i.status == 3) {
            i.clockStatus = '打卡异常'
          }
        } else {
          i.clockStatus = '打卡异常'
        }
      })

    })

  })
}
// 改变月的状态
function changeMonth(e) {
  let year = e.selectedDate.split('-')[0];
  let month = e.selectedDate.split('-')[1];
  let params = {
    year,
    month,
  };

  getmonthList(params);
}
</script>

<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}

// 背景图片盒子
.container {
  background-size: 100% 40%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

:deep(.u-icon__icon) {
  background: $uni-bg-color;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;

}

/*日历*/
.classDate {
  width: 710rpx;
  margin: 80rpx auto 30rpx auto;
  // min-height: 370rpx;
  border-radius: 16rpx;
  background-color: $uni-bg-color;
  box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 5;

  &:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: -33rpx;
    left: 30rpx;
    width: 638rpx;
    height: 20rpx;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;
    background-color: #D9D9D9;

  }

  &:after {
    content: "";
    z-index: 1;
    position: absolute;
    top: -20rpx;
    left: 10rpx;
    width: 678rpx;
    height: 20rpx;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    background-color: #F1F1F1;

  }

  .line {
    height: 30rpx;
    width: 100%;
  }

  .classDate_tab {
    height: 80rpx;
    width: 90%;
    margin: 0rpx auto 30rpx auto;
    display: flex;
    align-items: center;
    border-radius: 32rpx;
    background-color: #F9FAFF;

    .tabsubtitle {
      color: $uni-color-primary;
      font-weight: 500;
      font-size: 30rpx;
      height: 80rpx;
      line-height: 80rpx;
      width: 33.3%;
      text-align: center;
    }

    .curr {
      height: 80rpx;
      text-align: center;
      color: $uni-color-primary;
      font-weight: 500;
      font-size: 30rpx;
      line-height: 80rpx;
      border-radius: 32rpx;
      width: 33.3%;
      background-color: #E7EBFF;
    }
  }

  .date {
    width: 100%;
    border-radius: 16rpx;
  }

  .hint {
    background: #F4F7FF;
    height: 96rpx;
    border-radius: 0 0 16rpx 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC;
   font-size:$uni-font-size-26;
    color: $uni-color-primary;

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
    }



  }

}

// 滚动
.comprehensive {
  width: calc(100% - 40rpx);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 20rpx;
  height: 45vh;
}

.att_cont {
  width: 100%;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  padding-bottom: 30rpx;

  .state {
    margin: 0 30rpx !important;
  }
}

// 周选择
.content_box {
  width: 100%;
  //   height: 400px;
  display: flex;
  flex-wrap: wrap;

  .content_box_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33.33%;
    height: 160rpx;

    .number {
      color: $uni-color-primary;
      font-weight: 500;
      font-size: 38rpx;
    }

    .title {
      margin-top: 10rpxs;
      color: #999999;
      font-weight: 500;
      font-size: 22rpx;
    }
  }
}
</style>